<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%=basePath%>">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/main.css">
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/main.js"></script>
<script src="${pageContext.request.contextPath}/js/MD5.js"></script>
<script src="js/city2.js"></script>
<script type="text/javascript" src="js/citySelect2.js"></script>
<title>新增商家</title>
</head>

<body>
	<%@ include file="header.jsp"%>
	<%@ include file="left.jsp"%>
	<div id="index"
		style="position: absolute;left: 180px;top: 80px;bottom: 0;right: 0;">

		<style>
.main_div {
	min-width: 1000px;
	min-height: 60px
}

.superDetaile {
	width: 64%;
	height: 100%;
	margin: 0 auto
}

.anotherDetaile {
	width: 80%;
	height: 150px;
	margin: 0 auto
}

.force-overflow1-1 {
	border: none
}

.anotherDetaileButton {
	width: 25%;
	height: 100%;
	text-align: center;
}

.buttonPic {
	width: 80px;
	height: 80px;
	margin: 5px auto;
}
</style>
		<section id="main">
			<div class="scrollbar1-1" id="style1-1">
				<div class="main_div">
					<div class="main_title">
						<span>新增商家</span>
					</div>
				</div>
				<div class="force-overflow1-1">
					<div class="superDetaile">
						<form id="uploadForm" class="form-horizontal"
							style="margin-top: 30px" enctype="multipart/form-data">
							<div class="form-group">
								<label class="col-xs-4 control-label">商家名称</label>
								<div class="col-xs-6">
									<input type="text" class="form-control" id="superName"
										name="name" placeholder="商家名称">
								</div>
							</div>
							<div class="form-group">
								<label class="col-xs-4 control-label">负责人</label>
								<div class="col-xs-6">
									<input type="text" class="form-control" id="superHost"
										name="Principal" placeholder="负责人">
								</div>
							</div>
							<div class="form-group">
								<label class="col-xs-4 control-label">身份证号</label>
								<div class="col-xs-6">
									<input type="text" class="form-control" id="IDcard"
										name="identityCard" placeholder="身份证号" maxlength="18">
								</div>
							</div>
							<div class="form-group">
								<label class="col-xs-4 control-label">联系电话</label>
								<div class="col-xs-6">
									<input type="text" class="form-control" id="phone" name="phone"
										placeholder="联系电话" maxlength="11">
								</div>
							</div>

							<div class="form-group" id="city_4">
								<label class="col-xs-4 control-label">省、市、区</label>
								<div class="col-xs-6">
									<select class="col-xs-4" id="prov4" data-code="510000"
										style="height: 34px;"></select> <select class="col-xs-4"
										id="city4" data-code="-1" style="height: 34px;"></select> <select
										class="col-xs-4" id="area4" data-code="-1"
										style="height: 34px;" name="agentRegion"></select>
								</div>
							</div>
							<script>
								var selectVal = new CitySelect({
									data : data,
									provId : "#prov4",
									cityId : '#city4',
									areaId : '#area4'
								});
							</script>

							<div class="form-group">
								<label class="col-xs-4 control-label">商家地址</label>
								<div class="col-xs-6">
									<input type="text" class="form-control" id="superAddress"
										name="address" placeholder="请输入地址，XX省XX市XX区XX路XX号">
								</div>
							</div>

							<div class="form-group">
								<label class="col-xs-4 control-label">商家经度</label>
								<div class="col-xs-6">
									<input type="text" class="form-control" id="superlongitude"
										name="longitude" placeholder="请输入地图定位的准确经度">
								</div>
							</div>
							<div class="form-group">
								<label class="col-xs-4 control-label">商家纬度</label>
								<div class="col-xs-6">
									<input type="text" class="form-control" id="superlatitude"
										name="latitude" placeholder="请输入地图定位的准确纬度">
								</div>
							</div>
							<div class="form-group">
								<label class="col-xs-4 control-label">商家简介</label>
								<textarea class="form-control" name="remark" cols="30" rows="10"
									style="width:50%;  padding: 10px;" placeholder="请输入200字内商家介绍"
									onchange="this.value=this.value.substring(0, 200);"
									onkeydown="this.value=this.value.substring(0, 200)"
									onkeyup="this.value=this.value.substring(0, 200)"></textarea>
							</div>

							<div class="form-group">
								<label style="text-align: left;color: red"
									class="col-xs-6 col-xs-offset-4 control-label">请使用定位工具精确定位后填写经纬度</label>
							</div>
							<div class="anotherDetaile">
								<div class="anotherDetaileButton" style="margin: 0 auto;">
									商家实景
									<div class="buttonPic">
										<img src="" style="width:80px;height:80px" id="image1"
											alt="未选择图片" />
									</div>
									<input type="file" name="cssj" onchange="selectImage1(this)"
										id="sjsj" style="width:200px; margin: 0 auto;">

								</div>

								<div class="form-group">
									<div class="col-xs-4 col-xs-offset-5">
										<button onclick="submitSuper()"
											class="col-xs-6 btn btn-primary" type="button">申请开通</button>
									</div>
								</div>
						</form>
					</div>
				</div>
			</div>
		</section>

	</div>
	<script>
		$(function() {
			$("#agentId").val(localStorage.getItem("agentid"))
		})
		var image = '';
		function selectImage2(file) { //显示图片
			if (!file.files || !file.files[0]) {
				return;
			}
			var reader = new FileReader();
			reader.onload = function(evt) {
				document.getElementById('image2').src = evt.target.result;
				image = evt.target.result;
			};
			reader.readAsDataURL(file.files[0]);
		}
		function selectImage3(file) { //显示图片
			if (!file.files || !file.files[0]) {
				return;
			}
			var reader = new FileReader();
			reader.onload = function(evt) {
				document.getElementById('image3').src = evt.target.result;
				image = evt.target.result;
			};
			reader.readAsDataURL(file.files[0]);
		}
		function selectImage4(file) { //显示图片
			if (!file.files || !file.files[0]) {
				return;
			}
			var reader = new FileReader();
			reader.onload = function(evt) {
				document.getElementById('image4').src = evt.target.result;
				image = evt.target.result;
			};
			reader.readAsDataURL(file.files[0]);
		}
		function selectImage1(file) { //显示图片
			if (!file.files || !file.files[0]) {
				return;
			}
			var reader = new FileReader();
			reader.onload = function(evt) {
				document.getElementById('image1').src = evt.target.result;
				image = evt.target.result;
			};
			reader.readAsDataURL(file.files[0]);
		}
		function submitSuper() {
			// 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X 
			var shenreg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
			if (shenreg.test($("#IDcard").val()) === false) {
				alert("身份证输入不合法、请重新输入");
				return false;
			}
	
			/*验证手机号正则匹配  */
			var phone = $('#phone').val();
			var telReg = /^0?(13|14|15|17|18)[0-9]{9}$/i;
			if (phone == "") {
				alert("手机号码不能为空");
				return false;
			} else if (!telReg.test(phone)) {
				alert("请输入11正确手机号码");
				return false;
			}
			
			/* 验证省、市、区 */
			//console.log($("#area4").val());			
			if($("#area4").val() < 0){
				alert("请输入详细的省市区地址");
				return false;
			}
	
			var allInput = $("#uploadForm").find("input");
			var config = true;
			for (var ids = 0; ids < allInput.length; ids++) {
				if (allInput[ids].value) {
				} else {
					config = false;
				}
			}
			if (config) {
				/********************用于判断图片大小以及图片名称是否合法******************/
				var aarr = document.getElementsByTagName("input");
				var barr = [];
				var picreg = /^[A-Za-z0-9\._]{1,100}$/; //图片名称正则
				var flag1 = false; //用于判断图片大小
				var flag2 = false; //用于判断图片名称
				for (var i = 0; i < aarr.length; i++) {
					if (aarr[i].type == "file") {
						barr.push(aarr[i])
					}
				}
				for (var z = 0; z < barr.length; z++) {
					if (barr[z].files[0].size > 204800) { //判断图片大小是否大于200kb
						flag1 = true;
					}
					if (!picreg.test(barr[z].files[0].name)) { //判断图片大小是否大于200kb
						flag2 = true;
					}
				}
				if (flag1) {
					alert("上传图片不得超过200kb每张");
					return;
				}
				if (flag2) {
					alert("图片名称只能由字母与数字组成");
					return;
				}
				/******************用于判断图片大小以及图片名称是否合法****************/
	
				$.ajax({
					url : urls + "superMarketAction/createSuperMarket",
					type : 'POST',
					cache : false,
					data : new FormData($('#uploadForm')[0]),
					processData : false,
					contentType : false
				}).done(function(res) {
					if (res == true) {
						alert("提交成功")
					} else if (res == false) {
						alert("提交失败")
					} else if (res == "250") {
						alert("附近已存在商家")
					} else if (res == "251") {
						alert("商家名称已存在，无法开通商家")
					}
				}).fail(function(res) {
					//console.log(res)
					alert("申请失败，经纬度填写错误或者服务器异常")
				});
			} else {
				alert("提交失败，请填写完超市信息")
			}
	
		}
	</script>
</body>
</html>
